<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>Vue 3 响应式和组合API</title>
</head>
<body>
<div id="app">
    <h1>用户信息</h1>
    <p>姓名: {{ user.username }}</p>
    <p>年龄: {{ user.age }}</p>
    <p>电子邮箱: {{ user.email }}</p>
    <p>城市: {{ user.city }}</p>
    <p>计数器: {{ counter }}</p>
    <button @click="increment">增加计数器</button>
    <button @click="updateUser">更新用户信息</button>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
    const { createApp, ref, reactive,onMounted} = Vue;

    const app = createApp({
        setup() {
            // 使用 reactive 创建响应式对象
            const user = reactive({
                username: 'lzh123',
                age: 20,
                email: 'lzh123@qq.com',
                city:'zs'
            });

            // 使用 ref 创建响应式变量
            const counter = ref(0);

            // 增加计数器的方法
            const increment = () => {
                counter.value+=5;
            };

            // 更新用户信息的方法
            const updateUser = () => {
                user.username = '李四';
                user.age = 25;
            };

            // 添加生命周期钩子
            onMounted(() => {
                console.log('组件已挂载');
            });
            return {user,counter,increment,updateUser};
        }
    });

    app.mount('#app');
</script>
</body>

</html>